<template>
    <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
        @finish="submit">
        <a-form-item label="数据库地址" name="host"
            :rules="[{ required: true, message: 'Please input your mysql host!' }]">
            <a-input-group compact>
                <a-input v-model:value="formState.host" style="width: 70%" />
                <a-input-number v-model:value="formState.port" :min="1" :max="66535" style="width: 30%" />
            </a-input-group>
        </a-form-item>

        <a-form-item label="用户名" name="user"
            :rules="[{ required: true, message: 'Please input your mysql user!' }]">
            <a-input v-model:value="formState.user" />
        </a-form-item>

        <a-form-item label="密码" name="password"
            :rules="[{ required: true, message: 'Please input your password!' }]">
            <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button type="primary" html-type="submit">连接</a-button>
        </a-form-item>
    </a-form>
</template>
<script setup>
import { ref, defineEmits, onMounted } from 'vue';

const emit = defineEmits(['submit']);

const formState = ref({
    host: 'localhost',
    port: 3306,
    user: '',
    password: ''
});

const submit = function () {
    emit("submit", formState.value);
}

const loadConfig = async function() {
    try {
        const result = await window.electron.ipcRenderer.invoke('config');
        console.log("config", result);
        
        formState.value = result.mysql;
    } catch (error) {
        console.error(error);
    }
}

onMounted(() => {
    loadConfig();
});

</script>